<!--
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the Source EULA. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
-->
<form class="angular-form" #myForm="ngForm" (ngSubmit)="onSubmit(f)">
	<div class="angular-modal-body" style="display: flex; flex-direction: column;">
		<div class="angular-modal-body-content">
			<div class="dialog-label">
				{{backupNameLabel}}
			</div>
			<div class="input-divider" #backupsetName>
			</div>
			<div class="dialog-label">
				{{recoveryModelLabel}}
			</div>
			<div class="input-divider" #recoveryModelContainer>
			</div>
			<div class="dialog-label">
				{{backupTypeLabel}}
			</div>
			<div class="input-divider" #backupTypeContainer>
			</div>
			<div class="input-divider check" #copyOnlyContainer>
			</div>
			<div class="dialog-label">
				{{backupDeviceLabel}}
			</div>
			<div class="backup-path-list">
				<div #pathContainer>
				</div>
			</div>
			<table class="backup-path-table">
				<tr>
					<td style="padding-left: 0px; padding-right: 0px;">
						<div class="backup-path-button" #addPathContainer></div>
					</td>
					<td>
						<div class="backup-path-button" #removePathContainer></div>
					</td>
				</tr>
			</table>


			<div class="advanced-main-header" #advancedOptionContainer>
				<div class="advanced-main-body" #advancedOptionBodyContainer>
					<!-- Compression -->
					<div class="dialog-label advanced-header">
						{{compressionLabel}}
					</div>
					<div class="indent">
						<div class="dialog-label">
							{{setBackupCompressionLabel}}
						</div>
						<div class="dialog-label" #compressionContainer>
						</div>
					</div>

					<!-- Encryption -->
					<div class="dialog-label advanced-header">
							{{encryptionLabel}}
					</div>
					<div class="indent">
						<div class="option check" #encryptCheckContainer>
						</div>
						<div class="option" #encryptWarningContainer>
							<div class="icon warning">
							</div>
							<div class="warning-message">
								{{noEncryptorWarning}}
							</div>
						</div>
						<div #encryptContainer>
							<div class="dialog-label">
								{{algorithmLabel}}
							</div>
							<div class="dialog-label" #algorithmContainer>
							</div>
							<div class="dialog-label">
								{{certificateOrAsymmetricKeyLabel}}
							</div>
							<div class="dialog-label" #encryptorContainer>
							</div>
						</div>
					</div>

					<!-- Overwrite media -->
					<div class="dialog-label advanced-header">
						{{mediaLabel}}
					</div>
					<div class="radio-indent">
						<div class="option">
							<input type="radio" name=media-option value="no_format" [checked]="!isFormatChecked" (change)="onChangeMediaFormat()" [disabled]="isEncryptChecked">{{mediaOptionLabel}}
						</div>
						<div style="margin-left:15px">
							<div class="option">
								<input type="radio" name=existing-media value="append" [(ngModel)]="selectedInitOption" [disabled]="isFormatChecked">{{existingMediaAppendLabel}}
							</div>
							<div class="option">
								<input type="radio" name=existing-media value="overwrite" [(ngModel)]="selectedInitOption" [disabled]="isFormatChecked">{{existingMediaOverwriteLabel}}
							</div>
						</div>

						<div class="option">
							<input type="radio" name=media-option value="format" [checked]="isFormatChecked" (change)="onChangeMediaFormat()">{{mediaOptionFormatLabel}}
						</div>
						<div style="margin-left: 22px">
							<div class="dialog-label">
								{{newMediaSetNameLabel}}
							</div>
							<div class="dialog-label" #mediaName>
							</div>
							<div class="dialog-label">
								{{newMediaSetDescriptionLabel}}
							</div>
							<div class="dialog-label" #mediaDescription>
							</div>
						</div>
					</div>

					<!-- Transaction log -->
					<div class="dialog-label advanced-header">
						{{transactionLogLabel}}
					</div>
					<div class="radio-indent">
						<div class="option">
							<input type="radio" name=t-log value="truncate" [checked]="isTruncateChecked" (change)="onChangeTlog()" [disabled]="disableTlog">Truncate the transaction log
						</div>
						<div class="option">
							<input type="radio" name=t-log value="taillog" [checked]="isTaillogChecked" (change)="onChangeTlog()" [disabled]="disableTlog">Backup the tail of the log
						</div>
					</div>

					<!-- Reliability -->
					<div class="dialog-label advanced-header">
						{{reliabilityLabel}}
					</div>
					<div class="indent">
						<div class="option check" #checksumContainer>
						</div>
						<div class="option check" #verifyContainer>
						</div>
						<div class="option check" #continueOnErrorContainer>
						</div>
					</div>

					<!-- Backup expiration -->
					<div class="dialog-label advanced-header">
						{{expirationLabel}}
					</div>
					<div class="indent">
						<div class="dialog-label">
							{{setBackupRetainDaysLabel}}
						</div>
						<div class="dialog-label">
							<div #backupDaysContainer></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="modal-footer" #modalFooterContainer>
		<div class="icon in-progress" #inProgressContainer></div>
		<div class="right-footer">
			<div class="footer-button" #scriptButtonContainer>
			</div>
			<div class="footer-button" #backupButtonContainer>
			</div>
			<div class="footer-button" #cancelButtonContainer>
			</div>
		</div>
	</div>
</form>